<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08让图表动起来</title>
    <script src="./node_modules/d3/dist/d3.min.js"></script>
</head>
<body>

</body>
</html>

<script>
    const body = d3.select('body');
    const svg = body.append('svg')
        .attr('width', 1000)
        .attr('height', 500)
        .style('background-color', 'rgba(0,0,0,.2)')
    // 第一个圆，要求移动 x 坐标。
    svg.append('circle')
        .attr('cx', 20)
        .attr('cy', 30)
        .attr('r', 20)
        .attr('fill', '#66dd58')
        .transition()
        .duration(2000)
        .attr('cx', 500)
    // 第二个矩形，要求既移动 x 坐标，又改变颜色。
    svg.append('rect')
        .attr('x', 10)
        .attr('y', 60)
        .attr('width', 40)
        .attr('height', 40)
        .attr('fill', '#fff200')
        .transition()
        .ease(d3.easeBounce)     // 在最终状态处弹跳几次
        // .ease(d3.easeElastic) // 带有弹跳的到达最终状态
        // .ease(d3.easeCircle)  // 慢慢地到达变换的最终状态
        // .ease(d3.easeLinear)  // 普通的线性变化
        .duration(1500)
        .delay(500)
        .attr('x', 480)
        .attr('fill', '#dd5c25')
    // 第三个圆，要求既移动 x 坐标，又改变颜色，还改变半径。
    svg.append('circle')
        .attr('cx', 20)
        .attr('cy', 120)
        .attr('r', 20)
        .attr('fill', '#ff1b46')
        .transition()
        .delay(0)
        .duration(2000)
        .attr('cx', 480)
        .attr('cy', 160)
        .ease(d3.easePolyIn)
        .attr('r', 40)
</script>
